<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>径向渐变</title>
	<style type="text/css">
        h1, section {
            margin: 60px;
        }

        .gradient {
            width: 150px;
            height: 100px;
        }

        .gradient-equal {
            background: radial-gradient(red, yellow, rgb(30, 144, 255));
        }

        .gradient-colorposition {
            background: radial-gradient(red 5%, yellow 15%, rgb(30, 144, 255) 60%);
        }

        .gradient-position {
            background: radial-gradient(at 30px 30px, red 5%, yellow 15%, rgb(30, 144, 255) 60%);
        }

        .gradient-shape1 {
            background: radial-gradient(circle, red, orange, yellow);
        }

        .gradient-shape2 {
            background: radial-gradient(red, orange, yellow);
        }

        .gradient-size div,
        .gradient-shape div {
            display: inline-block;
            width: 200px;
            height: 140px;
        }

        .gradient-size1 {
            background: radial-gradient(circle closest-side, red, orange, yellow);
        }

        .gradient-size2 {
            background: radial-gradient(circle farthest-side, red, orange, yellow);
        }

        .gradient-size3 {
            background: radial-gradient(circle closest-corner, red, orange, yellow);
        }

        .gradient-size4 {
            background: radial-gradient(circle farthest-corner, red, orange, yellow);
        }

        .gradient-repeat {
            background: repeating-radial-gradient(red, orange 10%, yellow 25%);
        }
	</style>
</head>
<body>
<h1>径向渐变</h1>

<section>
<h2>等间距色标</h2>
<pre>
.gradient-equal {
    background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
</pre>
<div class="gradient gradient-equal"></div>
</section>

<section>
<h2>指定间距色标</h2>
<pre>
.gradient-colorposition {
    background: radial-gradient(red 5%, yellow 15%, rgb(30, 144, 255) 60%);
}
</pre>
<div class="gradient gradient-colorposition"></div>
</section>

<section>
<h2>指定中心点位置</h2>
<pre>
.gradient-position {
    background: radial-gradient(at 30px 30px, red 5%, yellow 15%, rgb(30, 144, 255) 60%);
}
</pre>
<div class="gradient gradient-position"></div>
</section>

<section>
<h2>指定渐变的形状（shape）</h2>
<pre>
.gradient-shape1 {
    background: radial-gradient(circle, red, orange, yellow);
}

.gradient-shape2 {
    background: radial-gradient(red, orange, yellow);
}
</pre>
<div class="gradient-shape">
    <div class="gradient-shape1"></div>
    <div class="gradient-shape2"></div>
</div>
</section>

<section>
<h2>指定渐变的尺寸（size）</h2>
<pre>
.gradient-size1 {
    background: radial-gradient(circle closest-side, red, orange, yellow);
}

.gradient-size2 {
    background: radial-gradient(circle farthest-side, red, orange, yellow);
}

.gradient-size3 {
    background: radial-gradient(circle closest-corner, red, orange, yellow);
}

.gradient-size4 {
    background: radial-gradient(circle farthest-corner, red, orange, yellow);
}
</pre>
<div class="gradient-size">
    <div class="gradient-size1"></div>
    <div class="gradient-size2"></div>
    <div class="gradient-size3"></div>
    <div class="gradient-size4"></div>
</div>
</section>

<section>
<h2>重复的径向渐变</h2>
<pre>
.gradient-repeat {
    background: repeating-radial-gradient(red, orange 10%, yellow 25%);
}
</pre>
<div class="gradient gradient-repeat"></div>
</section>
  
</body>
</html>

